<template>
	<view class="content">
		
<!--		<view class="uni-panel" v-for="item in lists" :key="item.url">-->
<!--			<view class="uni-panel-h" @click="goDetailPage(item.url)">-->
<!--				<text class="uni-panel-text">{{item.name}}</text>-->
<!--				<text class="uni-panel-icon uni-icon">&#xe470;</text>-->
<!--			</view>-->
<!--		</view>-->

    <view v-for="item in lists" :key="item.url" class="item-outer">
      <view @click="goDetailPage(item)" class="item-inner">
        <text>{{ item.name }}</text>
      </view>
    </view>

<!--		<image class="logo" src="/static/logo.png"></image>-->
<!--		<view class="text-area">-->
<!--			<text class="title">{{title}}</text>-->
<!--		</view>-->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				lists: [
					{
						name: "scrollview-demo1",
						url: "scrollview-demo1",
            tabBar: true,
					},
          {
            name: "view-scroll",
            url: "view-scroll"
          },
          {
            name: "view-scroll2",
            url: "view-scroll2"
          },
				]
			}
		},
		onLoad() {

		},
		methods: {
			goDetailPage(item) {
				const url = '/pages/' + item.url + '/' + item.url
        if (item.tabBar) {
          // uni.switchTab({url: url})
          uni.reLaunch({
            url: url
          })
        } else {
          uni.navigateTo({
            url: url
          })
        }
			}
		}
	}
</script>

<style lang="scss">

.content {
  //display: flex;
  //flex-direction: column;
  //align-items: flex-start;
  //justify-content: center;
  padding-top: 20px;
}

  .item-outer {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 40px;
    line-height: 40px;
    // :hover :link, :visited, 和 :active等。
    :hover {
      background-color: #f2edf3;
      color: #dd524d;
    }
  }

  .item-inner {
    display: inline-block;
    margin: 0;
    padding: 0 0 0 20px;
    //flex-direction: column;
    //align-items: flex-start;
    //justify-content: center;
    width: 100%;
    height: 100%;
    // :hover :link, :visited, 和 :active等。
    //:hover {
    //  background-color: #f2edf3;
    //  color: #dd524d;
    //}
  }




</style>
